<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>

<style>
  #container {
    width:500px;
    height:100px;
    overflow:auto;
    border:2px solid red;
    padding:0px;
  }
  #spacer {
    height:200px;
  }
</style>

<ol>
  <li>Middle-click inside the &lt;div&gt; with the red border below to activate pan-mode.</li>
  <li>Move the mouse such that you scroll the &lt;div&gt; until you see the hyperlinks &quot;Link 1&quot; and &quot;Link 2&quot;.</li>
  <li>Left-click the hyperlink &quot;Link 1&quot;. Should exit panning but not activate the link.</li>
  <li>Left-click the hyperlink &quot;Link 2&quot;. Should activate the link.</li>
</ol>
<div id="container">
  <div id="spacer" ></div>
  <a id="firstLink" href="#">Link 1</a> <a id="secondLink" href="#">Link 2</a>
</div>

<script>

window.onload = async function()
{
    const container = document.getElementById("container");
    const firstLink = document.getElementById("firstLink");
    const secondLink = document.getElementById("secondLink");

    const leftButton = 0;
    const middleButton = 1;

    promise_test (async (t) => {
      await waitForCompositorCommit();
      await mouseClickOn(container.offsetLeft + 10, container.offsetTop + 10, middleButton);
      await mouseMoveTo(container.offsetLeft + 10, container.offsetTop + container.offsetHeight);

      await waitFor(() => {
        return container.scrollTop === container.scrollHeight - container.clientHeight;
      }, "Failed to scroll container with middle-click autoscroll.");

      let firstLinkClicked = false;
      let secondLinkClicked = false;

      firstLink.onclick = e => { firstLinkClicked = true; };
      secondLink.onclick = e => { secondLinkClicked = true; };

      const firstLinkBoundingBox = firstLink.getBoundingClientRect();
      const secondLinkBoundingBox = secondLink.getBoundingClientRect();

      await mouseClickOn(firstLinkBoundingBox.left + 10, firstLinkBoundingBox.top, leftButton);

      await mouseClickOn(secondLinkBoundingBox.left + 10, secondLinkBoundingBox.top + 5, leftButton);

      assert_false(firstLinkClicked, "Click over link while in autoscroll mode must not fire click event");
      assert_true(secondLinkClicked, "Click on second link must have caused click event");

      await mouseClickOn(firstLinkBoundingBox.left + 10, firstLinkBoundingBox.top, leftButton);

      assert_true(firstLinkClicked, "Click over first link should now fire click event");
    }, "Clicking link while in pan-mode is ignored");
}
</script>
